<template>
	<view class="content">
		
		<view class="btn-ul f-r-b">
			<view class="btn-li">
				<view class="li-img">
					<image class="img4" src="../../static/image/icon.png"></image>
				</view>
				<view class="li-title">可提现天数</view>
				<view class="money">{{detail.extractableDays||0}} (天)</view>
			</view>
			<view class="btn-li">
				<view class="li-img">
					<image class="img4" src="../../static/image/icon2.png"></image>
				</view>
				<view class="li-title">已提现天数</view>
				<view class="money">{{detail.drawnDays||0}} (天)</view>
			</view>
		</view>
		<view class="btn bggradient f-r-c" @click="submitTx">提现</view>
		
		<view class="nav-box f-r-b">
			<view class="nav-li" :class="nav_index==0?'on':''" @click="nav_change(0)">
				<text class="title">奖励记录</text>
				<text class="icon"></text>
			</view>
			<view class="nav-li" :class="nav_index==1?'on':''" @click="nav_change(1)">
				<text class="title">提现记录</text>
				<text class="icon"></text>
			</view>
			
		</view>
		<view class="list">
			<view class="list-li" v-for="(item,index) in detailList" :key="index" >
				<view class="f-r-b time">
					<view>{{item.rewardDate?$parseTime(item.rewardDate):''}}</view>
					<view>{{item.rewardDay}}天</view>
				</view>
				<view class="remark" >{{item.remark}}</view>
			</view>
		</view>
		
		
		<uni-popup ref="picPopup"  :is-mask-click="true" type="center" background-color="#fff">
		    <view class="dialog">
		        <view class="t1" >提现天数</view>
				<input class="input" type="number" v-model="extractableDays" placeholder="输入提现天数" @input="inputAmount"/>
		        <view class="btn bggradient f-r-c"  @click="submit">确定</view>
		    </view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				detail:{
					extractableDays:0,
					drawnDays:0,
				},
				detailList:[],
				extractableDays:'',
				nav_index:0,
			}
		},
		computed: {
			themeColor() {
				return this.$themeColor;
			},
			
		},
		onLoad(option) {
			this.getExtendData();
			this.getExtendList();
		},
		methods:{
			nav_change(index){
				this.nav_index=index;
				this.getExtendList();
			},
			getExtendData(){
				let opts = {
					url: '/authMarket/getRewardData',
					method: 'get'
				};
				let _self=this;
				_self.$http(opts,{}).then(res => {
					if(res.code==200&&res.data){
				        _self.detail=res.data;
					}
				}) 
			},
			getExtendList(){
				let opts = {
					url: `/authMarket/getRewardRecords/${this.nav_index}`,
					method: 'get'
				};
				let _self=this;
				_self.$http(opts,{}).then(res => {
					if(res.code==200){
				        _self.detailList=res.data;
					}
				}) 
			},
			submitTx(){
				
				if(this.detail.extractableDays<0||this.detail.extractableDays==0 ||!this.detail.extractableDays){
					uni.showToast({
						title:'可提现天数不足,不可提现',
						icon:'none',
					})
					return false;
				}
				this.open();
				
				
				
			},
			open(){
				this.$refs.picPopup.open();
			},
			close(){
				this.$refs.picPopup.close();
			},
			inputAmount(e){
				const inputTypeNum =/[^\d]/g //数字
				this.$nextTick(() => {
					this.extractableDays = e.target.value.replace(inputTypeNum, '');
				})
			},
			submit(){
			    if(this.extractableDays<0||this.extractableDays==0||this.extractableDays==''){
					uni.showToast({
						title:'输入提现天数',
						icon:'none',
					})
					return false;
				}
				let opts = {
					url: `/authMarket/withdrawAccount/${this.extractableDays}`,
					method: 'put'
				};
				let _self=this;
				_self.$http(opts,{}).then(res => {
					console.log(res);
					if(res.code==200){
						uni.showToast({
							title:'提现成功',
							icon:'none',
						})
						_self.extractableDays='';
						_self.close();
				        _self.getExtendData();
						_self.getExtendList();
						
						
					}else{
						uni.showToast({
							title:res.msg!=''?res.msg:'提现失败',
							icon:'none',
						})
						_self.extractableDays='';
						_self.close();
						
					}
				}) 
			},
		},
		
	}
</script>
<style>
	page{
		background: #f8f8f8;
	}
</style>
<style scoped lang="less">
	.content{
		.nav-box{
			height: 100rpx;
			border-bottom: 1rpx #eee solid;
			.nav-li{
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;align-items: center;
				justify-content: center;
				text{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					
					width: 100%;
					height: 96rpx;
					font-size: 30rpx;
					font-weight: 500;
				}
				.icon{
					width:80rpx;
					height: 4rpx;
					background: transparent;
				}
				
			}
			.on{
				.icon{
					background: #f00;
				}
			}
			
		}
		.dialog{
			width: 500rpx;
			padding: 60rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 20rpx;
			.img4{
				width: 120rpx;
				height: 120rpx;
				margin: 0 auto 50rpx;
				display: block;
			}
			.t1{
				color: #333;
				font-size: 30rpx;
				margin-bottom: 20rpx;
			}
			.input{
				flex:1;
				background: #eee;
				color: #000;
				font-size: 26rpx;
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 20rpx;
				border-radius: 10rpx;
				margin-bottom: 60rpx;
			}
			.btn{
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				color: #fff;
				
				
			}
		}
		.btn-ul{
			height: 260rpx;

			.btn-li{
				flex: 1;
				margin-right: 20rpx;
				height: 100%;
				box-sizing: border-box;
				padding: 24rpx 0;
				background: #fff;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				.li-img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-bottom: 20rpx;
					.img4{
						width: 100%;
						height: 100%;
						background-size: 100%;
						
					}
				}
				.li-title{
					color: #222;
					font-size: 27rpx;
					margin-bottom: 20rpx;
				}
				.money{
					font-size: 32rpx;
					font-weight: 500;
					color: #000;
					
				}
			}
			:nth-of-type(3){
				margin-right: 0;
				
			}
		}
		.btn{
			width: 100%;
			height: 70rpx;
			border-radius: 40rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: 400;
			margin: 30rpx 0;
		}
		.tx-title{
			// border: 1rpx #f00 solid;
			.icon{
				width: 8rpx;
				height: 30rpx;
				border-radius: 4rpx;
				margin-right: 10rpx;
				display: block;
			}
			.t{
				color: #000;
				font-size: 28rpx;
				font-weight: 500;
				
			}
			
		}
		.list{
			margin-top: 20rpx;
			.list-li{
				border-bottom: 1rpx #eee solid;
				padding:10rpx;
				.tiem{
					color: #333;
					font-size: 26rpx;
				}
				.remark{
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
</style>